<template>
  <div id="monitor1"> 
   
   <div class="con">
         <div class="top">
             <div class="top_item" style="flex: 1;">
                 <img class="top_img" src="@/assets/images/png2.png" />
                   显示预约
                   <el-form ref="form" :model="form" label-width="80px">  
                    <el-form-item label="" label-width="0px" style="margin-left:10px;margin-bottom:0px !important;">
                       <el-date-picker 
                       :picker-options="pickerOptions" @change="select_change" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.time"  style="width:150px;"></el-date-picker>
                    </el-form-item>
                 </el-form>
             </div> 
              <div class="top_item" >
                 <div class="see_but" @click="go_but()">查看详情</div>
             </div>
         </div>
         <div class="box">
              <div class="item_a">
                      <div class="item_b" v-for="(item,index) in list_data" :key="index">
                          <div class="item_b_1">
                            <img class="item_b_1_img" v-if="index == 0" src="@/assets/images/zy1.png" />
                            <img class="item_b_1_img" v-if="index == 1" src="@/assets/images/zy2.png" />
                            <img class="item_b_1_img" v-if="index == 2" src="@/assets/images/zy3.png" />
                            <img class="item_b_1_img" v-if="index == 3" src="@/assets/images/zy4.png" />
                            {{ item.title }}
                           </div>
                          <div class="item_b_2">
                            {{ item.sham_appointment_number }} <i style="font-size:15px;" class="el-icon-edit" @click="edit_but(item.maid,item.sham_appointment_number)"></i>
                          </div>
                      </div>
                  </div>
         </div>
   </div>

   <el-dialog title="修改预约数" :visible.sync="edit_mtk"  width="400px" >
          <el-form ref="form" :model="edit_form"  label-width="100px" style="width:100%;">
                <el-form-item label="" label-width="0px">
                    <el-input v-model="edit_form.number" placeholder="请输入数量" ></el-input>
                </el-form-item>
                <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="edit_but_qr">确认</el-button>
                </div>
         </el-form>
    </el-dialog> 

</div>
</template>

<script>

export default {
   name: 'monitor1',
  data () {
    return {
      pickerOptions: { // 计费日期的约束条件
        disabledDate(time) {
            return time.getTime() < new Date('2021-02-03').getTime()
            }
      },
      list_data:'',
      form:{
        time:''
      },
      edit_mtk:false,
      maid:'',
      edit_form:{
            number:''
      },
    }
  },
   components:{

  },
  created(){
      this.form.time = this.getNowDate1()
      this.list_fun()
  },
  mounted (){
   
  },
  methods: {
      list_fun(){
         this.post("/Control/shamAppointmentList", {
             starttime:this.form.time
	        }).then(res => {
              this.list_data = res.result.splice(0,4);
              //console.log( this.list_data,"ddd")
         })
    },
    select_change(){
       this.list_fun()
    },
    edit_but(maid,number){
         this.maid = ''
         this.maid = maid
         this.edit_form.number = number
         this.edit_mtk = true
        
    },
    edit_but_qr(){
          this.post("/manor/updateAppoint", {
                    maid:this.maid,
                    day_appoint_count:this.edit_form.number
                }).then(res => {
                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                     this.list_fun()
                    this.edit_mtk = false
                    }else {
                    this.open1(res.message,'warning')
                }

             })
    },
    go_but(){
    this.$router.push({
        path: '/index/operationdata/Monitor/detailsmonitor2',
        query: {
            name:'显示预约详情',
        }
    })
  }

  }
}
</script>


<style scoped>
#monitor1{
  padding:2px;
}
.con{
   padding:15px;
   border-radius: 7px;  
   box-shadow: rgba(116, 77, 254, 0.1) 0px 0px 7px;
}
.top{
    display: flex;
}
.top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.box{
    padding: 10px;
    height:200px;
}
.item_a{
  /* display:flex; */
  padding:0px 15px;

}
.item_b{
  /* flex: 1; */
  float: left;
  width: calc(100%/2);
    margin-top:20px;
}
.item_b_1{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #5E6C84;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item_b_1_img{
  width:20px;
  height: 20px;
  margin-right:5px;
}
.item_b_2{
  margin-top: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}
.el-input--suffix>>>.el-input__inner{
  height:35px;
}
.see_but{
    width: 90px;
    height: 30px;
    background: #B3C0D1;
    border-radius: 18px;
    text-align: center;
    line-height: 30px;
    color:white;
    font-size: 14px;
    cursor: pointer;
}
</style>